<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑书单 - ZLibLike平台</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div th:replace="~{commons/header :: header}"></div>
    
    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col-md-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">首页</a></li>
                        <li class="breadcrumb-item"><a href="/book-lists.html">书单</a></li>
                        <li class="breadcrumb-item active">编辑书单</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">编辑书单</h4>
                    </div>
                    <div class="card-body">
                        <div id="errorMessage" class="alert alert-danger d-none" role="alert"></div>
                        
                        <form id="bookListForm">
                            <input type="hidden" id="listId">
                            
                            <div class="form-group">
                                <label for="title">书单标题 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" required maxlength="100">
                            </div>
                            
                            <div class="form-group">
                                <label for="description">书单描述</label>
                                <textarea class="form-control" id="description" name="description" rows="4" maxlength="500" placeholder="介绍一下这个书单的主题或内容..."></textarea>
                                <small class="form-text text-muted">最多500个字符</small>
                            </div>
                            
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="isPublic" name="isPublic">
                                    <label class="custom-control-label" for="isPublic">公开书单（所有用户可见）</label>
                                </div>
                                <small class="form-text text-muted">私人书单只有您自己可以查看</small>
                            </div>
                            
                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-primary" id="saveBookList">保存更改</button>
                                <a href="#" class="btn btn-secondary ml-2" id="cancelEdit">取消</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">编辑指南</h4>
                    </div>
                    <div class="card-body">
                        <h5>优秀的书单标题</h5>
                        <ul>
                            <li>具体而明确（如"2023年度科幻小说推荐"）</li>
                            <li>突出主题或特色（如"初学者编程入门书籍"）</li>
                            <li>表明目标读者（如"医学生必读书籍"）</li>
                        </ul>
                        
                        <h5>有用的书单描述</h5>
                        <ul>
                            <li>解释书单的创建目的</li>
                            <li>说明书籍的选择标准</li>
                            <li>介绍书单的组织方式</li>
                            <li>分享您对这些书籍的整体评价</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div th:replace="~{commons/footer :: footer}"></div>
    
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        $(document).ready(function() {
            // 获取书单ID
            const urlParams = new URLSearchParams(window.location.search);
            const listId = urlParams.get('id');
            
            // 绑定返回按钮事件
            $('#cancelEdit').click(function(e) {
                e.preventDefault();
                if (listId) {
                    window.location.href = `/book-list-detail.html?id=${listId}`;
                } else {
                    window.location.href = '/book-lists.html';
                }
            });
            
            // 如果有ID，则获取书单信息
            if (listId) {
                $('#listId').val(listId);
                loadBookListInfo(listId);
            } else {
                $('#errorMessage').text('缺少书单ID参数').removeClass('d-none');
                $('#bookListForm').addClass('d-none');
            }
            
            // 绑定表单提交事件
            $('#bookListForm').submit(function(e) {
                e.preventDefault();
                saveBookList();
            });
            
            // 加载书单信息
            function loadBookListInfo(listId) {
                fetch(`/api/book-lists/${listId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 200) {
                            const bookList = data.data;
                            
                            // 检查权限
                            if (!bookList.canEdit) {
                                $('#errorMessage').text('您没有权限编辑这个书单').removeClass('d-none');
                                $('#bookListForm').addClass('d-none');
                                return;
                            }
                            
                            // 填充表单
                            $('#title').val(bookList.title);
                            $('#description').val(bookList.description);
                            $('#isPublic').prop('checked', bookList.isPublic);
                            
                            // 更新页面标题
                            document.title = `编辑: ${bookList.title} - ZLibLike平台`;
                        } else {
                            $('#errorMessage').text(data.message || '无法加载书单信息').removeClass('d-none');
                            $('#bookListForm').addClass('d-none');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        $('#errorMessage').text('加载书单信息时发生错误，请稍后重试').removeClass('d-none');
                        $('#bookListForm').addClass('d-none');
                    });
            }
            
            // 保存书单
            function saveBookList() {
                // 表单验证
                if (!$('#title').val().trim()) {
                    $('#errorMessage').text('书单标题不能为空').removeClass('d-none');
                    return;
                }
                
                // 准备数据
                const bookListData = {
                    title: $('#title').val().trim(),
                    description: $('#description').val().trim(),
                    isPublic: $('#isPublic').is(':checked')
                };
                
                // 发送请求
                fetch(`/api/book-lists/${listId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(bookListData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200) {
                        // 更新成功，返回详情页
                        window.location.href = `/book-list-detail.html?id=${listId}`;
                    } else {
                        // 显示错误信息
                        $('#errorMessage').text(data.message || '保存失败，请稍后重试').removeClass('d-none');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    $('#errorMessage').text('保存过程中发生错误，请稍后重试').removeClass('d-none');
                });
            }
        });
    </script>
</body>
</html> 